<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :title="$t('common.add')"
    @open="open"
    @closed="handleClosed"
  >
    <el-form ref="form" :model="info">
      <el-alert type="warning">
        {{ $t('dataSearch.platformWarning') }}
      </el-alert>
      <el-form-item>
        <el-input
          v-model="info.text"
          type="textarea"
          :autosize="{ minRows: 5 }"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleConfirm">{{
        $t('table.confirm')
      }}</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import {
  getAction,
  postAction,
  getUrlAction,
  postUrlAction,
} from '@/api/common'

@Component
export default class extends Vue {
  @Prop({ required: true }) private show!: boolean

  private info = { text: '' }
  private dialogVisible = false

  @Watch('show')
  handleShowChange(val: boolean) {
    this.dialogVisible = val
  }

  private open() {
    this.$nextTick(() => {
      this.info = { text: '' }
    })
  }

  async handleConfirm() {
    const arr = this.info.text.split('\n').filter((m) => m)
    this.dialogVisible = false
    this.$emit('submit', arr)
  }

  handleClosed() {
    this.$emit('update:show', false)
  }
}
</script>

<style scoped></style>
